<template>
  <div class="body">
    <header>
      <a href="/#/login" class="logo"
        ><img src="../assets/fitness图标.png" alt=""
      /></a>
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务预约</a></li>
      </ul>
    </header>
    <section class="banner1">
      <video
        src="../assets/pc/keep1.mp4"
        muted=""
        autoplay=""
        loop=""
        width="100%"
      ></video>
      <div class="banner1_img"><img src="../assets/zlgwzy.png" alt="" /></div>
    </section>
    <section class="banner2">
      <div class="banner2-1">
        <p>Fitness</p>
      </div>
      <div class="banner2-2">
        <h2>
          在 Fitness App<br />
          体验海量的运动课程和专业的运动工具，<br />和社区的好友一起随时随地跟练、记录和分享，<br />尽享专属于你的运动时刻。
        </h2>
      </div>
    </section>
    <section class="banner3">
      <div class="banner3-1">
        <h2>为所有，尽所能</h2>
      </div>
      <div class="banner3-2">
        <p>生命无止境,运动无极限</p>
        <p>经历所有不可能,造就属于你的可能</p>
      </div>
    </section>
    <!-- 加入Fitness -->
    <div class="join_fitness">
      <div class="banner_text">
        <span> 加入 Fitness </span>
        <div class="learn_more">了解更多 ></div>
        <!--<div class="erweima"><img src="../assets/wxtp.jpg" alt="" /></div>-->
      </div>
    </div>
    <!-- 底部导航栏 -->
    <div class="footer">
      <!-- 第一列 -->
      <div class="footer_1">
        <img src="../assets/fitness图标.png" alt="" />
        <div>
          <p>哪有什么天生如此，只是我们天天坚持</p>
          <p>自律给我自由</p>
        </div>
        <div class="icon">
          <img src="../assets/icon-apple.png" alt="" />
          <img src="../assets/icon-android.png" alt="" />
        </div>
      </div>
      <!-- 第二列 -->
      <div class="footer_2">
        <p>关于</p>
        <p>关于我们</p>
        <p>加入我们</p>
        <p>联系方式</p>
        <p>用户协议</p>
        <p>隐私政策</p>
        <p>证照信息</p>
        <p>廉洁举报</p>
      </div>
      <!-- 第三列 -->
      <div class="footer_3">
        <p>产品与服务</p>
        <p>App</p>
        <p>消费品</p>
        <p>智能硬件</p>
      </div>
      <!-- 第四列 -->
      <div class="footer_4">
        <p>其他</p>
        <p>Fitness公益</p>
        <p>媒体</p>
      </div>
      <!-- 第五列 -->
      <div class="footer_5">
        <p>规范说明</p>
        <p>社区规范</p>
        <p>用户公约</p>
        <p>规则百科</p>
        <p>侵权投诉与说明</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 鼠标滚轮滚动事件
    window.addEventListener("scroll", () => {
      let header = document.querySelector("header");
      header.classList.toggle("sticky", window.scrollY > 0);
    });
  }
};
</script>

<style lang="scss" scoped>
/* 引入网络字体（Poppins） */
// @import url("http://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins";
}
.body {
  /* 默认最小高度：2屏 */
  min-height: 200vh;
  background-color: #000;
}
header {
  /* 固定定位 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 弹性布局 */
  display: flex;
  /* 将元素靠边对齐 */
  justify-content: space-between;
  align-items: center;
  padding: 40px 100px;
  z-index: 1;
  /* 动画过渡 */
  transition: 0.6s;
}
header .logo {
  font-size: 32px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  /* 转大写 */
  text-transform: uppercase;
  /* 字间距 */
  letter-spacing: 2px;
  transition: 0.6s;
}
header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
header ul li {
  list-style: none;
}
header ul li a {
  margin: 0 15px;
  text-decoration: none;
  color: #fff;
  // color: rgb(255, 0, 0);
  font-weight: 500;
  letter-spacing: 2px;
  transition: 0.6s;
}
.banner1 {
  position: relative;
}
.banner1_img {
  position: absolute;
  top: 24vw;
  left: 40vw;
}
.banner2 {
  position: relative;
  margin-top: -8.3%;
  background-color: #000;
  opacity: 0.9;
  width: 100%;
  height: 110vh;
  background: url("../assets/pc/8.jpg") no-repeat;
  /* 保持原有尺寸比例，裁切长边 */
  background-size: cover;
  /* 图片定位正中间 */
  background-position: center center;
}

.banner2 > .banner2-1 > p,
.banner2 > .banner2-2 > h2 {
  display: block;
  position: relative;
  color: #494949;
  font-weight: bold;
}
.banner2 > .banner2-1 > p {
  top: 90px;
  left: 8%;
  margin: 8% 0 0 0;
  font-size: 100px;
  font-family: PingFangSC-Medium, PingFang SC;
  line-height: 68px;
}
.banner2 > .banner2-2 > h2 {
  margin: 150px 0px 0px 8%;
  // max-width: 900px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 510;
  line-height: 50px;
}
/* 加入我们 */
.join_fitness {
  height: 40vh;
  background-image: url("../assets/dot-f9f08d552d.png");
  background-color: rgb(255, 255, 255);
  position: relative;
  overflow: hidden;
  width: 100%;
  // opacity: 0.9;
}
.banner_text {
  font-size: 58px;
  color: #333;
  line-height: 68px;
  margin: 100px 0 58px 85px;
  position: absolute;
  font-family: PingFangSC-Semibold, PingFang SC;
}
.learn_more {
  color: #6d51f4;
  align-items: center;
  font-size: 20px;
  font-weight: 300;
}
.learn_more:hover {
  cursor: pointer;
}
.banner3 {
  background-color: #000;
  opacity: 0.9;
  width: 100%;
  height: 100vh;
  background: url("../assets/pc/22.webp") no-repeat;
  background-size: cover;
  background-position: center center;
}
.banner3 > .banner3-1,
.banner3 > .banner3-2 {
  color: #424242;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.banner3 > .banner3-2 {
  position: absolute;
}
.banner3 > .banner3-1 > h2 {
  position: relative;
  line-height: 90px;
  overflow: hidden;
  margin: 6% 0 0 0;
  margin-left: 55%;
  color: #424242;
  font-size: 70px;
  font-weight: bold;
  font-family: PingFangSC-Medium, PingFang SC;
}
.banner3 > .banner3-2 {
  position: absolute;
  margin-left: 58%;
  margin-top: 6%;
}
.banner3 > .banner3-2 > p {
  position: relative;
  margin: 6px;
  display: block;
  line-height: 45px;
  font-weight: bold;
  font-size: 25px;
  font-family: PingFangSC-Medium, PingFang SC;
}
.erweima > img {
  display: block;
  margin-top: -45%;
  margin-left: 450%;
  width: 200px;
  border-radius: 10px;
}
/* 鼠标滚动后，改变导航栏样式 */
header.sticky {
  padding: 6px 100px;
  background-color: rgb(43, 42, 42);
}
header.sticky .logo,
header.sticky ul li a {
  color: rgb(118, 118, 118);
}

// 底部
.footer {
  display: flex;
  justify-content: space-around;
  margin: 30px 85px;
}
.footer > .footer_1,
.footer > .footer_2,
.footer > .footer_3,
.footer > .footer_4,
.footer > .footer_5 {
  display: inline-block;
  color: #fff;
  margin: 16px;
  padding: 6px 3px;
}
.footer > .footer_1 > img {
  margin: 6px 0;
}
.footer > .footer_1 > div {
  margin: 15px 0px;
}
.footer > .footer_1 > div > p {
  margin: 20px 0px;
}
.footer > .footer_1 > .icon > img {
  width: 150px;
  margin-top: 35px;
  margin-right: 15px;
}
// 第二列
.footer > .footer_2 {
  display: block;
}
.footer > .footer_2 > p {
  margin: 18px 0px;
  font-size: 14px;
}
.footer > .footer_2 > p:first-child {
  font-size: 12px;
  font-weight: bold;
}
// 第三列
.footer > .footer_3 {
  display: block;
}
.footer > .footer_3 > p {
  margin: 18px 0px;
  font-size: 14px;
}
.footer > .footer_3 > p:first-child {
  font-size: 12px;
  font-weight: bold;
}
// 第四列
.footer > .footer_4 {
  display: block;
}
.footer > .footer_4 > p {
  margin: 18px 0px;
  font-size: 14px;
}
.footer > .footer_4 > p:first-child {
  font-size: 12px;
  font-weight: bold;
}
// 第五列
.footer > .footer_5 {
  display: block;
}
.footer > .footer_5 > p {
  margin: 18px 0px;
  font-size: 14px;
}
.footer > .footer_5 > p:first-child {
  font-size: 12px;
  font-weight: bold;
}
/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
